
<template>
  <div class="Sidebar_dlog">
    <div class="header">
      <Header_dlog />
    </div>
    <!------------------- 这是顶部 ------------------->
    <div class="top">
      <img src="../images/匠-书房.png" alt />
      <p>天奇图书，都是好书！</p>
    </div>
    <!------------------- 这是头部 结束------------------->
    <!------------------- 这是内容 ------------------->
    <div class="content">
      <!------------------- 这是内容左边 ------------------->

      <div class="content-left">
        <img src="../assets/Tianqi.png" alt />
      </div>
      <!------------------- 这是内容左边 结束------------------->
      <!------------------- 这是内容右边 ------------------->

      <div class="content-right">
        <div class="lin" v-for="(item, index) in hearos" :key="item.title" @click="toGoods(index)">
          <router-link to="/details">
            <img :src="item.images" />
            <div class="title">{{ item.title }}</div>
            <div class="intro">{{ item.intro }}</div>
            <div class="price">
              <span>天奇图书</span>
              ￥{{ item.price }}
            </div>
          </router-link>
          <router-view />
        </div>
      </div>
    </div>

    <div class="fot">
      <Fotter_dlog />
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import Header_dlog from "@/components/Header_dlog.vue";
import Fotter_dlog from "@/components/Fotter_dlog.vue";
export default {
  components: { Header_dlog, Fotter_dlog },
  name: "Sidebar_dlog",
  computed: {
    ...mapState(["hearos"]),
  },
  data() {
    //返回
    return {};
  },
  methods: {
    // 点击事件
    toGoods(index) {
      this.$store.dispatch("skip", index);
    },
  },
};
</script>
<style scoped>
.Sidebar_dlog {
  height: 100%;
}
.top {
  display: flex;
  width: 1100px;
  height: 58px;
  background-color: rgb(252, 252, 252);
  margin: 0 auto;
  margin-top: 50px;
}
.top p {
  font-size: 22px;
  line-height: 35px;
  margin-top: -35px;
  margin-left: 4px;
  color: #f5740a;
}
.top img {
  height: 65px;
  margin-left: -6px;
  margin-top: -48px;
}
.content {
  display: flex;
  width: 1100px;
  height: 514px;
  /* margin-left: 148px; */
  background-color: rgb(252, 252, 252);
  margin: 0 auto;
}
.content-left {
  width: 220px;
  height: 514px;
  /* background-color: skyblue; */
}
.content-left img {
  width: 220px;
  height: 514px;
  border-radius: 10px;
}
.content-right {
  width: 900px;
  height: 514px;
  /* background-color: rgb(193, 214, 142); */
}
.content-right > div {
  float: left;
  width: 205.6px;
  height: 250px;
  background-color: rgb(255, 255, 255);
  margin-left: 14px;
  margin-bottom: 14px;
}
.content-right .lin {
  transform: all 0.2s linear;
  border-radius: 10px;
}
.content-right .lin:hover {
  box-shadow: 1px 3px 10px -5px;
  background-color: rgb(255, 255, 255);
  transform: translate(0, 0);
  /* 动画效果 */
  transform: translate(0, -5px);
}
.content-left img:hover {
  box-shadow: 1px 3px 10px -5px;
  background-color: rgb(255, 255, 255);
}
.content-right img {
  width: 150px;
  height: 150px;
  padding-left: 30px;
}
.content-right .title {
  font-size: 15px;
  padding-left: 55px;
  color: black;
  width: 50%;
  overflow: hidden;
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.content-right .intro {
  margin-top: 5px;
  font-size: 11px;
  padding-left: 55px;
  color: rgb(209, 205, 205);
  width: 50%;
  overflow: hidden;
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.content-right .price {
  margin-top: 10px;
  font-size: 18px;
  color: rgb(245, 116, 10);
  margin-left: 130px;
}
.content-right span {
  text-align: left;
  margin-left: -90px;
  font-size: 12px;
}
.fotter {
  width: 1100px;
  margin: 0 auto;
  margin-top: 20px;
}
.fotter img {
  width: 1100px;
  /* margin-left: 300px; */
}
.fot {
  margin-top: 850px;
}
</style>
